<template>
  <div class="drawal">
    <div class="title">
      <div>
        <span>成功提现总额：</span>
        <span>{{sum}}元</span>
      </div>
    </div>
    <div class="screen">
      <el-select v-model="params.flowStatus" @change='changeData()' placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>

    <el-table class="tableBox" border :data="tableData" style="width: 100%">
      <el-table-column prop="userId" label="用户ID" width="180"></el-table-column>
      <!-- <el-table-column prop="name" label="用户昵称" width="180"></el-table-column>
      <el-table-column label="用户头像">
        <template slot-scope="scope">
          <div class="imgBox">
            <img :src="scope.row.avatar" alt>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="提现金额">
        <template slot-scope="scope">
          <span>{{getWithDrawal(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="detail" label="描述">
          
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
            <span>{{ getStatus(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提现时间">
        <template slot-scope="scope">
          <!-- {{ scope.row.time | parseTime('{y}-{m}-{d} {h}:{i}') }} -->
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.flowStatus.value === 'handling' || scope.row.flowStatus.value === 'checking'" @click="openForwardVisible(scope.row,true)" type="text" size="mini">通过</el-button>
          <el-button v-if="scope.row.flowStatus.value === 'handling' || scope.row.flowStatus.value === 'checking'" @click="openForwardVisible(scope.row,false)" type="text" size="mini">拒绝</el-button>
          <!-- <span></span> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class='pagination'
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <p>请输入拒绝原因</p>
      <el-input class="edit" v-model="withdrawParams.reason" placeholder="请输入内容"></el-input>
      <div class="btnGroup">
        <el-button>取消</el-button>
        <el-button @click="sureForword" type="primary">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogForwardVisible"
      width="30%"
      :before-close="handleCloseForward"
    >
      <p>确认通过该笔提现吗？</p>
      <div class="btnGroup">
        <el-button @click="dialogForwardVisible = false">取消</el-button>
        <el-button @click="sureForword" type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import {ajax} from '@/api';
import { parseTime } from '@/utils';
import numberFormat from '@/api/numberFormat';
import {getToken} from "@/utils/auth";
export default {
  name: "caseWithdrawal",
  data() {
    return {
      dialogVisible: false,
      dialogForwardVisible: false,
      options: [{//提现记录
        text:'全部',
        value:''
      },{
        text:'成功',
        value:'success'
      },{
        text:'处理中',
        value:'handling'
      },{
        text:'失败',
        value:'failed'
      }],
      checkParams: {
        reason: ""
      },
      value: "",
      tableData: [],
      total:0,
      params:{
        targetUserId:'',
        keyword:'',
        operateType:'withdraw',
        flowStatus:'handling',
        start:0,
        limit:10,
        token:getToken()
      },
      sum:0,
      withdrawParams:{
        targetUserId:'',
        withdrawId:'',
        success:'',
        reason:'',
        token:getToken()
      }
    };
  },
  methods: {
    changeData(){
      this.getData();
    },
    getData(){

      ajax('userFlows',this.params).then((res) => {
          if(res.status === 200){
            this.total = res.data.total;
            this.tableData = res.data.data;
            this.sum = parseFloat(numberFormat.showDecimal((res.data.sum))).toLocaleString();
          }
        });
    },
    openForwardVisible(data,pass) {
      this.withdrawParams.targetUserId = data.userId;
      this.withdrawParams.withdrawId = data.id;
      if (pass) {
        this.dialogForwardVisible = true;
        this.withdrawParams.success = true;
      } else {

        this.dialogVisible = true;
        this.withdrawParams.success = false;
      }
    },
    //用户提现审核
    getWithdrawCheck(){
      ajax('userWithdrawCheck',this.withdrawParams).then((res) => {
          if(res.status === 200){
            this.$message.success(res.data.message);
            this.getData();
            this.dialogForwardVisible = false;
            this.dialogVisible = false;
          }else{
            this.$message.error(res.data.message);
          }
        });
    },
    getStatus(data){
      return data.flowStatus.text;
    },
    sureForword() {
        this.getWithdrawCheck();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleCloseForward() {
      this.dialogForwardVisible = false;
    },
    handleCurrentChange(val){
      this.params.start = (val - 1) * this.params.limit;
      this.getData();
    },
    getWithDrawal(data){
      return numberFormat.showDecimal(data.offset);
    }
  },
  mounted(){
    this.getData();
  }
};
</script>



<style lang="less" scoped>
.drawal {
  padding: 1rem;
  .title {
    display: flex;
    padding: 0.8rem 0;
    border-bottom: 1px solid #e7e7e7;
    div {
      display: flex;
      span:last-child {
        font-size: 17px;
        color: #04affd;
      }
    }
  }
  .screen {
    margin: 1rem 0;
  }
  .imgBox {
    width: 50px;
    height: 50px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50px;
    }
  }

  .btnGroup {
    text-align: right;
    margin-top: 2rem;
  }

  .pagination{
    margin: 1rem 0;
    text-align: right;
  }

}
</style>
